<%@ page title="" language="C#" masterpagefile="~/Visitor.master" autoeventwireup="true" inherits="VisitorReport, App_Web_odyrwiur" %>

<%@ Register TagPrefix="asp" Namespace="Saplin.Controls" Assembly="DropDownCheckBoxes" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="AjaxControlToolkit" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
    <link href="css/googleapis.css" rel="stylesheet" type="text/css" />

    <style type="text/css">
        .textbox {
        }

        .btnRt003366 {
        }

        .breadcrumb {
            display: flex;
            flex-wrap: wrap;
            padding: .05rem 0rem;
            /* margin-bottom: 1rem; */
            list-style: none;
            background-color: #fff !important;
            border-radius: .25rem;
            color: #E15C11;
            font-size: 18px;
            font-weight: 500;
        }
        .dash{
            color:#FE4800;
        }
        /*icons*/
.site-memubar-green .dash {
    color: #66bb6a;
}
.site-memubar-red .dash{
    color: #ef5350;
}
.site-memubar-blue .dash {
    color: #26c6da;
}
.site-memubar-pink .dash {
    color: #FF1493;
}
.site-memubar-orange .dash {
    color: #FE4800;
}
.site-memubar-black .dash{
    color: #000;
}
.site-memubar-darkviolet .dash {
    color: #9400D3;
}
.site-memubar-magenta .dash {
    color: #FF00FF;
}
.site-memubar-purple .dash{
    color: #800080;
}
.site-memubar-indigo .dash {
    color: #4B0082;
}
.site-memubar-green1 .dash {
    color: #11C26D;
}
.site-memubar-lightgreen .dash {
    color: #6DA611;
}
.site-memubar-lightblue .dash {
    color: #3E8EF7;
}
.site-memubar-gray .dash {
    color: #757575;
}
.site-memubar-bluegrey .dash {
    color: #526069;
}
.site-memubar-brown .dash {
    color: #997B71;
}
.site-memubar-yellow .dash {
    color: #FFCD17;
}
.site-memubar-teal .dash {
    color: #17B3A3;
}
.site-memubar-cyan .dash {
    color: #0BB2D4;
}

        .card [class*=card-header-]:not(.card-header-icon):not(.card-header-text):not(.card-header-image) {
            border-radius: 3px;
            margin-top: -37px;
            padding: 7px !important;
        }

        .grid-lable {
            height: 100px;
            overflow-y: scroll;
            border: 1px solid #ddd;
            margin-left: -10px;
            margin-right: -10px;
            padding: 6px;
        }

        .form-check, label {
            font-size: 15px !important;
            line-height: 1.32857 !important;
            color: #333 !important;
            font-weight: 200 !important;
            padding-left: 7px !important;
            padding-top: -3px !important;
            position: relative !important;
            top: -3px !important;
        }

        .grid-lable span {
            font-size: 15px !important;
            line-height: 1.32857 !important;
            color: #333 !important;
            font-weight: 200 !important;
            padding-left: 7px !important;
            padding-top: -3px !important;
            position: relative !important;
            top: -3px !important;
        }

        .grid-lable1 span {
            font-size: 14px !important;
            line-height: 1.42857 !important;
            color: #333 !important;
            font-weight: 600 !important;
            padding-left: 7px !important;
            padding-top: -3px !important;
            position: relative !important;
            top: -3px !important;
        }

        .grid-lable lable {
            display: inline-block;
            margin-bottom: 0rem !important;
        }

        label {
            display: inline-block;
            margin-bottom: 0rem !important;
        }

        #inputSearch {
            height: 21px;
            margin-top: 5px;
            margin-bottom: 8px;
            width: 100%;
        }

        #MainContent_lblReportDate {
            font-size: 14px;
            position: relative;
            top: -3px;
            font-weight: bold;
        }

        #MainContent_lblToDate {
            font-size: 14px;
            font-weight: bold;
        }

        #MainContent_lblSelectionBy {
            font-size: 15px;
            font-weight: 600;
        }

        #MainContent_lblSelectReport {
            font-size: 15px;
            font-weight: 600;
        }

        .bold-fonts label {
            font-weight: bold !important;
            font-size: 14px !important;
        }

        .container {
            margin-left: 0px;
            max-width: 93% !important;
        }

        .bcenter button {
            text-align: center;
            align-items: center;
        }

        .dd_chk_select {
            height: 35px !important;
            text-align: center !important;
            padding: 8px !important;
            border-radius: 5px;
        }

        .dd_chk_drop {
            top: 32px !important;
        }

        .exportbtn {
            display: inline !important;
        }

        .btn {
            padding: 4px 14px !important;
        }

        #MainContent_visitrname {
            background: url(css/images/search.png) no-repeat;
            background-size: 20px;
            background-position-x: 98%;
            background-position-y: center;
        }

        .rpt {
            background: #fb8c00;
            border-radius:8px;
        }
        .rpt .row{
            background:transparent!important;
        }

            .rpt i, .rpttxt {
                color: #fff !important;
            }
            .site-memubar-green .rpt {
    background-color: #66bb6a;
}
.site-memubar-red .rpt {
    background-color: #ef5350;
}
.site-memubar-blue .rpt {
    background-color: #26c6da;
}
.site-memubar-pink .rpt {
    background-color: #FF1493;
}
.site-memubar-orange .rpt {
    background-color: #FE4800;
}
.site-memubar-black .rpt {
    background-color: #000;
}
.site-memubar-darkviolet .rpt {
    background-color: #9400D3;
}
.site-memubar-magenta .rpt {
    background-color: #FF00FF;
}
.site-memubar-purple .rpt {
    background-color: #800080;
}
.site-memubar-indigo .rpt {
    background-color: #4B0082;
}
.site-memubar-green1 .rpt {
    background-color: #11C26D;
}
.site-memubar-lightgreen .rpt {
    background-color: #6DA611;
}
.site-memubar-lightblue .rpt {
    background-color: #3E8EF7;
}
.site-memubar-gray .rpt {
    background-color: #757575;
}
.site-memubar-bluegrey .rpt {
    background-color: #526069;
}
.site-memubar-brown .rpt {
    background-color: #997B71;
}
.site-memubar-yellow .rpt {
    background-color: #FFCD17;
}
.site-memubar-teal .rpt {
    background-color: #17B3A3;
}
.site-memubar-cyan .rpt {
    background-color: #0BB2D4;
}
            /*.txtdash{
                background: rgb(254,72,0);background: linear-gradient(90deg, rgba(254,72,0,1) 0%, rgba(34,167,240,1) 100%);
            }

        .txtdash .row{
                background: rgba( 255, 255, 255, 0.80 );backdrop-filter: blur( 3.0px );-webkit-backdrop-filter: blur( 3.0px );
                border-radius:10px 0 0 10px;
        }*/
            .txtdash{
                background-color:transparent!important;
            }
            .txtdash:hover {
                color: #fff !important;
                background-color:#FE4800!important;
            }
            .site-memubar-green .txtdash:hover {
    background-color: #66bb6a!important;
}
.site-memubar-red .txtdash:hover {
    background-color: #ef5350!important;
}
.site-memubar-blue .txtdash:hover {
    background-color: #26c6da!important;
}
.site-memubar-pink .txtdash:hover {
    background-color: #FF1493!important;
}
.site-memubar-orange .txtdash:hover {
    background-color: #FE4800!important;
}
.site-memubar-black .txtdash:hover {
    background-color: #000!important;
}
.site-memubar-darkviolet .txtdash:hover {
    background-color: #9400D3!important;
}
.site-memubar-magenta .txtdash:hover {
    background-color: #FF00FF!important;
}
.site-memubar-purple .txtdash:hover {
    background-color: #800080!important;
}
.site-memubar-indigo .txtdash:hover {
    background-color: #4B0082!important;
}
.site-memubar-green1 .txtdash:hover {
    background-color: #11C26D!important;
}
.site-memubar-lightgreen .txtdash:hover {
    background-color: #6DA611!important;
}
.site-memubar-lightblue .txtdash:hover {
    background-color: #3E8EF7!important;
}
.site-memubar-gray .txtdash:hover {
    background-color: #757575!important;
}
.site-memubar-bluegrey .txtdash:hover {
    background-color: #526069!important;
}
.site-memubar-brown .txtdash:hover {
    background-color: #997B71!important;
}
.site-memubar-yellow .txtdash:hover {
    background-color: #FFCD17!important;
}
.site-memubar-teal .txtdash:hover {
    background-color: #17B3A3!important;
}
.site-memubar-cyan .txtdash:hover {
    background-color: #0BB2D4!important;
}
        .table tr th {
            font-weight: 600 !important;
            color: #000 !important;
            letter-spacing: 0.4px;
        }

        #MainContent_Grid1 tr th {
            color: #fff !important;
            background-color: #E15C11;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="head" runat="Server">
    <script type="text/javascript">
        function validate() {
            var textvar = document.getElementById("<%=txtfromdate.ClientID %>").value;
            if (textvar == "") {
                alert("Please select a from date");
                document.getElementById("<%=txtfromdate.ClientID%>").focus();
                return false;
            }
            var textvar = document.getElementById("<%=txttodate.ClientID %>").value;
            if (textvar == "") {
                alert("Please select a to date");
                document.getElementById("<%=txttodate.ClientID%>").focus();
                return false;
            }
        }
        function verifyDate(sender, args) {
            var d1 = document.getElementById("<%=txtfromdate.ClientID%>").value;
            var d2 = document.getElementById("<%=txttodate.ClientID%>").value;
            d1 = d1.split("/");
            d1 = d1[1] + "/" + d1[0] + "/" + d1[2];
            d2 = d2.split("/");
            d2 = d2[1] + "/" + d2[0] + "/" + d2[2];
            var d1 = new Date(d1);
            var d2 = new Date(d2);
            d1.setHours(0, 0, 0, 0);
            d2.setHours(0, 0, 0, 0);
            d1 = d1.getTime();
            d2 = d2.getTime();
            if (d1 > d2) {
                alert("Date should be greater than from date.");
                sender._textbox.set_Value('');
                document.getElementById("<%=txttodate.ClientID%>").focus();
                return false;
            }
            
        }
        <%--function DateCheck(sender, args) {
            var StartDate = document.getElementById("<%=txtfromdate.ClientID%>").value;
            var EndDate = document.getElementById("<%=txttodate.ClientID%>").value;
            if (StartDate > EndDate) {
                alert("Please ensure that the To Date is greater than or equal to the From Date.");
                sender._textbox.set_Value('');
                document.getElementById("<%=txttodate.ClientID%>").focus();
            }

        }--%>
</script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="Server">
    <div class="main-panel">
        <div class="content">
            <div class="container" id="monthly12" runat="server" style="margin-left: 7px!important; max-width: 99%!important;">
                <div class="row dash-pane2">
                    <div class="card bcenter" style="margin-top: 28px;">
                        <div class="card-header card-header-warning">
                            <div class="row">
                                <div class="col-2">
                                    <h4 class="card-title" style="margin-top: 6px;"><i class="fa fa-edit fa-fw"></i>
                                        <asp:Label ID="lblMonthlyReport" runat="server" Text="Visitor Report"></asp:Label></h4>
                                </div>
                                <div class="col-3">
                                    <p style="display: inline; font-size: 15px; font-weight: 600">From Date</p>
                                    &nbsp;&nbsp;
                            <asp:TextBox ID="txtfromdate" runat="server" autocomplete="off" CssClass="form-control" Style="width: 172px; display: inline; height: 30px;"></asp:TextBox>
                                    <cc1:CalendarExtender ID="CalendarExtender1" runat="server" Format="dd/MM/yyyy" TargetControlID="txtfromdate"  />
                                </div>
                                <div class="col-3">
                                    <p style="display: inline; font-size: 15px; font-weight: 600">To Date</p>
                                    &nbsp;&nbsp;
                            <asp:TextBox ID="txttodate" runat="server" autocomplete="off" CssClass="form-control" Style="width: 172px; display: inline; height: 30px;"></asp:TextBox>
                                    <cc1:CalendarExtender ID="CalendarExtender2" runat="server" Format="dd/MM/yyyy" TargetControlID="txttodate" OnClientDateSelectionChanged="verifyDate" />
                                </div>
                                <div class="col-4 text-center">
                                    <asp:Button ID="Submit1" runat="server" Text="Show Report" OnClick="Submit" OnClientClick="return validate()" CssClass="btn btn-success" />
                                <%--  <a href="Vtp.asmx">  <asp:Button ID="Button1" runat="server" Text="Home" CssClass="btn btn-danger" /></a>--%>
                                    <asp:Button ID="Button2" runat="server" Text="Export as CSV" OnClick="csvexport" Style="display: none; margin-left: 50px;" />
                                     <input type="button" id="btnPrint" value="Print" onclick="PrintGridData()" class="btn btn-primary "  />
                                </div>
                            </div>
                        </div>
                        <div class="card-body table-responsive" style="z-index: 0; padding-bottom: 80px;">
                            <div class="row">
                                <div class="col-lg-4 px-0">
                                    <div class="card">
                                        <div class="card-header" style="padding-bottom: 0px;">
                                            <h4 class="card-title">Report By Visitor's Details </h4>
                                            <hr />
                                        </div>
                                        <div class="card-body" style="padding-top: 0px;">
                                            <div class="row" style="width: 100%">
                                                <div class="col-lg-6">
                                                    <h5>Company Name</h5>
                                                    <asp:TextBox ID="txtcompanyname" runat="server" CssClass="form-control"></asp:TextBox>


                                                </div>
                                                <div class="col-lg-6">
                                                    <h5>Phone Number</h5>
                                                    <asp:TextBox ID="txtContactNumber" runat="server" CssClass="form-control"></asp:TextBox>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                                <div class="col-lg-8 px-0">
                                    <div class="card">
                                        <div class="card-header" style="padding-bottom: 0px;">
                                            <h4 class="card-title">Report By Employee Details</h4>
                                            <hr />
                                        </div>
                                        <div class="card-body" style="padding-top: 0">
                                            <div class="row">

                                                <div class="col-lg-3">
                                                    <h5>Location</h5>
                                                    <asp:DropDownCheckBoxes ID="cbobranch" runat="server" Width="180px" UseSelectAllNode="true"  AutoPostBack="true" CssClass="form-control" OnSelectedIndexChanged="cbobranch_SelectedIndexChanged">
                                                        <Style SelectBoxWidth="195" DropDownBoxBoxWidth="100" DropDownBoxBoxHeight="100" />
                                                    </asp:DropDownCheckBoxes>

                                                </div>
                                                <div class="col-lg-3">
                                                    <h5>Department</h5>
                                                    <asp:DropDownCheckBoxes ID="cbodepartment" runat="server" Width="180px" UseSelectAllNode="true" AutoPostBack="true" OnSelectedIndexChanged="cbodepartment_SelectedIndexChanged">
                                                        <Style SelectBoxWidth="195" DropDownBoxBoxWidth="100" DropDownBoxBoxHeight="100" />
                                                    </asp:DropDownCheckBoxes>
                                                </div>

                                                <div class="col-lg-3">
                                                    <h5>Designation</h5>
                                                    <asp:DropDownCheckBoxes ID="cbodesignation" runat="server" Width="180px" UseSelectAllNode="true" CssClass="form-control" AutoPostBack="true" OnSelectedIndexChanged="cbodesignation_SelectedIndexChanged">
                                                        <Style SelectBoxWidth="195" DropDownBoxBoxWidth="100" DropDownBoxBoxHeight="100" />
                                                    </asp:DropDownCheckBoxes>

                                                </div>
                                                <div class="col-lg-3">
                                                    <h5>Employee</h5>
                                                    <asp:DropDownCheckBoxes ID="cboemployee" runat="server" Width="180px" UseSelectAllNode="true" CssClass="form-control" OnSelectedIndexChanged="cboemployee_SelectedIndexChanged">
                                                        <Style SelectBoxWidth="195" DropDownBoxBoxWidth="100" DropDownBoxBoxHeight="100" />
                                                    </asp:DropDownCheckBoxes>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-12 text-center" style="margin-top: -10px;">
                                    <input type="text" id="visitrname" class="form-control" style="margin-bottom:10px;width:50%" placeholder="Search by Visitor Name" aria-label="Search" />
                                    <%--<asp:TextBox ID="tryruj" runat="server" placeholder="Search" Style="display: none; width: 50%; margin-bottom: 10px;"></asp:TextBox>--%>
                                    <asp:GridView ID="Grid1" runat="server" class="table table-bordered table-hover table-striped" AutoGenerateColumns="False">
                                        <Columns>
                                            <asp:BoundField DataField="visitorname" HeaderText="Visitor Name" SortExpression="EmpCode"></asp:BoundField>
                                            <asp:BoundField DataField="ContactNumber" HeaderText="Contact Number" SortExpression="EmpCode"></asp:BoundField>
                                            <asp:BoundField DataField="VisitorCompany" HeaderText="Visitor Company" SortExpression="EmpCode"></asp:BoundField>
                                            <asp:BoundField DataField="visitper" HeaderText="Visit Purpose" SortExpression="EmpCode"></asp:BoundField>
                                            <asp:BoundField DataField="Dept_Names" HeaderText="Department" SortExpression="EmpCode"></asp:BoundField>
                                            <asp:BoundField DataField="ToMeet" HeaderText="To Meet" SortExpression="EmpCode"></asp:BoundField>
                                            <asp:BoundField DataField="InTime" HeaderText="In Time" SortExpression="EmpCode"></asp:BoundField>
                                            <asp:BoundField DataField="Outtime" HeaderText="Out Time" SortExpression="EmpCode"></asp:BoundField>
                                    
                                        
<asp:TemplateField>
    <ItemTemplate>
        <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("id") %>' Height="100px" Width="90px"  />
    </ItemTemplate>
</asp:TemplateField>    
                                        </Columns>
                                    </asp:GridView>

                                     <script type="text/javascript">
     function PrintGridData() {
         var prtGrid = document.getElementById('<%=Grid1.ClientID %>');
         prtGrid.border = 0;
         var prtwin = window.open('', 'PrintGridViewData', 'left=200,top=100,width=1000,height=1000,tollbar=0,scrollbars=1,status=0,resizable=1');
         prtwin.document.write('<html><head><title>Report</title>');
         prtwin.document.write('<link rel=stylesheet href="css/bootstrap.minfd53.css">');
         prtwin.document.write('<style>.table>tbody>tr>td,th{vertical-align: middle;text-align:center;}img{border-radius:100%;height:100px;width:100px;}</style>');
         prtwin.document.write(prtGrid.outerHTML);
         prtwin.document.close();
         prtwin.focus();
         setTimeout(() => {  prtwin.print(); }, 500);
         //prtwin.close();
     }
</script>



                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <%--<script src="js/jquery-3.5.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="quicksearch.js"></script>--%>
    <%--<script type="text/javascript">
        $(function () {
            $('#visitrname').each(function (i) {
                $(this).quicksearch("[id*=Grid1] tr:not(:has(th))", {
                    'testQuery': function (query, txt, row) {
                        return $(row).children(":eq(" + i + ")").text().toLowerCase().indexOf(query[0].toLowerCase()) != -1;
                    }
                });
            });
        });
    </script>--%>
</asp:Content>